<template>
    <div id="">
       <!-- 重置密码页面-->
        <ul>
            <li>
                <div>用户名</div>
                <div><input type="text" placeholder="请输入用户名" v-model="name"></div>
                <div></div>
            </li>
            <li>
                <div>密码</div>
                <div><input type="text" placeholder="请输入密码" v-model="mima"></div>
                <div></div>
            </li>
            <li>
                <div>确认密码</div>
                <div><input type="text" placeholder="确认密码" v-model="ermima"></div>
                <div></div>
            </li>
        </ul>


        <div class="tij">提交</div>
    </div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
			    name:'',
                mima:'',
                ermima:''
            }
		},
		methods: {

		}
	}
</script>

<style scoped>
    .tij{
        margin: 50px 10px 0;
        background-color: #2ac845;
        color: white;
        text-align: center;
        padding: 6px 0;
    }
    li{
        background-color: white;
        display: flex;
        padding: 8px 10px;
        border-bottom: 1px solid #c7c7c7;
        line-height: 30px;
    }
    li>div{vertical-align: middle}
    li>div:nth-child(1){flex: 1}
    li>div:nth-child(2){flex: 2}
    li>div:nth-child(3){flex: 1}

    input[type='text']{
        font-size: 16px;
        height: 30px;
        margin-bottom: 0;
        padding: 10px 15px;
        border: none;
        outline:none;
    }
</style>
